import React, { useCallback } from 'react'
import { useHistory } from 'react-router-dom'

import PropTypes from 'prop-types'

import {
  Top10Wrap
} from './StyledCookBook'

const Top10 = ({list}) => {
  const { push } = useHistory()

  const handleGotoDetail = useCallback(
    (id) => {
      return () => {
        push({ pathname: '/detail', state: { id } })
      }
    },
    [push],
  )

  return (
    <Top10Wrap>
      <h2>精品好菜</h2>
      <ul>
        {
          list.slice(0, 10).map((item) => {
            return (
              <li
                key={item.id}
                onClick={handleGotoDetail(item.id)}
              >
                <img src={item.img} alt={item.name}/>
                <div>
                  <p>{item.name}</p>
                  <p>{item.all_click}浏览 {item.favorites}收藏</p>
                </div>
              </li>
            )
          })
        }
      </ul>
    </Top10Wrap>
  )
}

Top10.propTypes = {
  list: PropTypes.array.isRequired
}

Top10.defaultProps = {
  list: []
}

export default Top10
